﻿@using Telerik.Web.Mvc
@using Telerik.Web.Mvc.UI
@using Presentation.Web.Admin
@model  IEnumerable<Application.Admin.Dto.ClientDto>
@{
    ViewBag.Title = "客户端报告";
    var now = System.DateTime.Now;
    var currentMonth = now.AddDays(-now.Day + 1);
}
<div>
    开始时间
    @Html.Telerik().DatePicker().Value(currentMonth).Format("yyyy-MM-dd").Name("StartTime")
    结束时间
    @Html.Telerik().DatePicker().Value(now).Format("yyyy-MM-dd").Name("EndTime")
    <input id="btnSearch" type="button" value="搜索" />
    <input id="btnRefresh" type="button" value="刷新" />
</div>
@(
 Html.Telerik().Chart(Model)
    .Name("ClientChart")
    .Legend(legend => legend.Position(ChartLegendPosition.Top))
    .Series(series =>
    {
        series.Column(s => s.Total).Name("客户端数量");
    })
    .CategoryAxis(axis => axis
        .Categories(d => d.Name).Labels(labels => labels.Rotation(45))
        .Title("客户端类型")
    )
    .ValueAxis(axis => axis
        .Numeric().Title("数量").Labels(labels => labels.Format("{0:#,##0}"))
    )
    .DataBinding(dataBinding => dataBinding.Ajax().Select("chart", "client"))
    .Tooltip(tooltip => tooltip.Format("{0:#,##0}").Visible(true))
    .HtmlAttributes(new { style = "width: 670px; height: 400px;" })
)
<script type="text/javascript">
    function getChart() {
        return $("#ClientChart").data("tChart");
    }

    function rebind() {
        getChart().rebind({ start: $("#StartTime").val(), end: $('#EndTime').val() });
    }

    $(function () {
        $('#btnSearch').click(function () {
            rebind();
        });
        $('#btnRefresh').click(function () {
            rebind();
        });
        //rebind();
    });
</script>
